<template>
  <div class="app-card relative box-border bg-#fff mr-16px w-432px mb-16px">
    <div class="flex items-center justify-between">
      <h3 class="link font-size-18px fw-500 lh-26px">
        {{ supplyInfo.supplyTitle }}
      </h3>
      <span :class="APPLICATION_STATUS_CLASS_ENUM[props.data.status]">{{
        APPLICATION_STATUS_ENUM[props.data.status]
      }}</span>
    </div>
    <div class="font-size-14px">
      <div class="lh-20px mt-12px text-light">
        {{ props.data.supplyTime?.slice(0, 16) }} ~
        {{ props.data.orderLastTime?.slice(0, 16) }}
      </div>
      <div class="h-1px mt-22px mb-16px bg-#d8d8d8"></div>
      <div class="text-row">
        <span>申请单号：</span>
        <div>{{ props.data.resourceOrderNumber }}</div>
      </div>

      <div class="text-row">
        <span>申请说明：</span>
        <div>{{ props.data.supplyDesc }}</div>
      </div>
      <div class="text-row">
        <span>资源类别：</span>
        <div>{{ SOURCE_TYPE_ENUM[supplyInfo.supplyType] }}</div>
      </div>
      <!-- <div class="text-row">
        <span>资源来源：</span>
        <div>算力圈</div>
      </div> -->
      <div class="text-row">
        <span>联系人：</span>
        <div>{{ props.data.contactUser }}</div>
      </div>
      <div class="text-row">
        <span>联系方式：</span>
        <div>{{ props.data.contactUserMobile }}</div>
      </div>
      <div class="text-right mt-20px">
        <template v-if="props.data.status === 0">
          <el-button type="primary" @click="doReview">审核</el-button>
        </template>
        <template v-else-if="[-1, 2].includes(props.data.status)">
          <el-popover
            placement="top"
            :width="250"
            trigger="click"
            :content="props.data.remark"
          >
            <template #reference>
              <el-button type="primary">{{
                props.data.status === 2 ? "审核说明" : "驳回原因"
              }}</el-button>
            </template>
          </el-popover>
        </template>
      </div>
    </div>
    <el-dialog
      title="审核"
      v-model="reviewVisible"
      width="40vw"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-form
        ref="reviewForm"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核说明" prop="auditResult">
          <el-input
            type="textarea"
            v-model="formData.auditResult"
            placeholder="请输入审核说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="doConfirm" :loading="confirmLoading"
          >确定</el-button
        >
        <el-button @click="reviewVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  APPLICATION_STATUS_ENUM,
  APPLICATION_STATUS_CLASS_ENUM,
  SOURCE_TYPE_ENUM,
} from "@/const";
import { useLoading } from "@/hooks";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emits = defineEmits(["refresh"]);
const { loading: confirmLoading, setLoading } = useLoading();
const supplyInfo = computed(() => props.data.resourceSupply);

const $api = inject("$api");

const reviewForm = ref();
const reviewVisible = ref(false);
const formData = ref({
  status: null,
  auditResult: "",
});
const rules = reactive({
  status: { required: true, message: "请选择审核结果" },
  auditResult: { required: true, message: "请输入审核说明" },
});
const doReview = () => {
  reviewVisible.value = true;
};
const handleClose = () => {
  reviewForm.value.resetFields();
};
const doConfirm = () => {
  reviewForm.value.validate(async (valid) => {
    if (valid) {
      setLoading(true);
      try {
        await $api.company.doReview({
          id: props.data.sysAudit.id,
          ...formData.value,
        });
        ElMessage.success("审核成功");
        reviewVisible.value = false;
        emits("refresh");
      } finally {
        setLoading(false);
      }
    }
  });
};
</script>

<style scoped lang="less">
.app-card {
  border: 1px solid #d9dbe1;
  padding: 21px 28px 18px 24px;
  overflow: hidden;
  &::after {
    content: "";
    position: absolute;
    background: url("/svg/folder.svg") no-repeat center;
    width: 71px;
    height: 44px;
    bottom: -4px;
    left: 0;
  }
  &:nth-child(3n) {
    margin-right: 0;
  }
}
.text-row {
  color: @text-light;
  display: flex;
  align-items: flex-start;
  line-height: 20px;
  margin-bottom: 12px;
  > div {
    flex: 1;
    .single-overflow;
  }
}
</style>
